<template>
  <basic-dialog
    :visible="visible"
    :title="'选择商品'"
    :width="'70%'"
    :handleClose="handleCloseDialog"
    :handleOpened="handleOpened"
    :showFooter="false"
  >
    <el-card shadow="never">
      <el-form
        ref="searchForm"
        size="mini"
        :inline="true"
        :model="formData"
      >
        <el-form-item label="分类" prop="categoryUuid">
          <CategorySelect
            useUuid
            v-model="formData.categoryUuid"
            ref="categorySelect"
            @getCategoryUuid="getCategoryUuid"
          />
        </el-form-item>
        <el-form-item label="商品代码" prop="skuNo">
          <el-input
            v-model="formData.skuNo"
            placeholder="商品代码"
            @keyup.enter.native="handleSearch"
          />
        </el-form-item>
        <el-form-item label="商品名称" prop="productName">
          <el-input
            v-model="formData.productName"
            placeholder="商品名称"
            @keyup.enter.native="handleSearch"
          />
        </el-form-item>
        <el-form-item label="品牌" prop="brandName">
          <el-input
            clearable
            v-model="formData.brandName"
            @clear="handleClearBrandName"
            @focus="showBrandDialog"
            suffix-icon="el-icon-search"
            placeholder="品牌"
          />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" :disabled="isRecommendTab" @click="handleSearch">查询</el-button>
          <el-button @click="handleReset">重置</el-button>
        </el-form-item>
      </el-form>
      <el-tabs v-model="tabInfo.selectedTab" @tab-click="handleSwitchTabs">
        <el-tab-pane
          v-for="item in tabInfo.list"
          v-model="item.name"
          :key="item.name"
          :label="item.title"
          :name="item.name"
          :disabled="tableInfo.loading"
        />
      </el-tabs>
      <SkusTable
        showActionCol
        :dataSource="tableInfo.list"
        :columns="tableInfo.columns"
        :loading="tableInfo.loading"
        :tableHeight="400"
        :pageSizes="pageSizes"
        :pagination="pagination"
        :total="total"
        :actionRender="actionRender"
        @pageChange="handlePageChange"
        @pageSizeSelect="handlePageSizeChange"
        :showPagination="!isRecommendTab"
      />
    </el-card>
    <!-- 选择品牌弹框 -->
    <SelectBrandDialog
      :visible.sync="brandVisible"
      @getBrandInfo="getBrandInfo"
    />
  </basic-dialog>
</template>
<script>
import BasicDialog from '@/components/BasicDialog';
import SkusTable from '@/components/skusTable';
import CategorySelect from '@sourcing/components/CategorySelect';
import SelectBrandDialog from '@sourcing/components/SelectBrandDialog';
import skusPage from '@/mixins/commodity/skusPage';
import {
  querySkuService,
  querySmartRecommendSkuService
} from '@/api/sourcing/public';
import { TABLE_COLUMNS } from './constants';

export default {
  name: 'SelectSpuDialog',
  mixins: [skusPage],
  components: {
    BasicDialog,
    SkusTable,
    CategorySelect,
    SelectBrandDialog,
  },
  props: {
    visible: {
      type: Boolean,
      default: false
    },
    productType: {
      type: [String, Number],
    },
    inquiryEntryId: {
      type: [String, Number],
    },
  },
  data () {
    return {
      brandVisible: false,
      formData: {
        categoryUuid: '',
        skuNo: '',
        productName: '',
        brandName: '',
        brandUuid: '',
        companyId: '',
      },
      tabInfo: {
        selectedTab: '10',
        list: [
          { title: '推荐商品', name: '10' },
          { title: '全部商品', name: '20' },
        ],
      },
      inquiryId: '',
      pageSizes: [10, 50, 100, 200],
    };
  },
  computed: {
    isRecommendTab () {
      return this.tabInfo.selectedTab == 10
    }
  },
  methods: {
    handleOpened () {
      this.initSkuTableColumn()
      this.inquiryId = this.inquiryEntryId
      this.tabInfo.selectedTab = '10'
      this.handleSwitchTabs({ name: '10' })
      this.$refs.searchForm.resetFields()
    },
    // tab 切换
    handleSwitchTabs (type) {
      this.tableInfo.list = [];
      this.total = 0;
      if (type.name == 10) {
        this.queryRecommendData()
      }
      if (type.name == 20) {
        // this.getTableData()
      }
    },
    actionRender (h, { row }) {
      return (
        <div class="table-action">
          <el-button
            size="mini"
            type="text"
            onClick={() => this.handleSelectSku(row)}
          > 选择
          </el-button>
        </div>
      );
    },
    initSkuTableColumn () {
      this.tableInfo.columns = TABLE_COLUMNS
    },
    // 查询
    handleSearch () {
      if (Object.values(this.formData).some(i => !!i)) {
        this.formData.companyId = 0;
        this.pagination.pageNum = 1
        this.getTableData()
      } else {
        this.$message.warning('查询条件不能为空')
      }
    },
    // 重置
    handleReset () {
      if (this.$refs.categorySelect) {
        this.$refs.categorySelect.clearCategoryNodes()
      }
      this.$refs.searchForm.resetFields();
      this.formData.brandUuid = '';
    },
    // 展示品牌弹框
    showBrandDialog () {
      this.brandVisible = true;
    },
    // 获取品牌信息
    getBrandInfo (row) {
      const { brandName, uuid } = row;
      this.formData.brandName = brandName;
      this.formData.brandUuid = uuid;
    },
    // 清空品牌
    handleClearBrandName () {
      this.formData.brandName = ''
      this.formData.brandUuid = ''
    },
    // 关闭弹框
    handleCloseDialog () {
      this.$emit('update:visible', false);
    },
    // 获取正常商品数据
    async getTableData () {
      const param = {
        ...this.formData,
        ...this.paginationParams,
        enumTempProductSet: [0, 1, 6] // 询价需求关联时传：[0,1,6] 订货关联时传：[0,6]
      }
      const res = await querySkuService(param, state => { this.tableInfo.loading = state })
      if (res?.data) {
        const { results, totalNum } = res.data;
        this.tableInfo.list = results;
        this.total = totalNum;
      }
    },
    // 获取推荐商品
    async queryRecommendData () {
      const res = await querySmartRecommendSkuService(
        { inquiryEntryId: this.inquiryId },
        state => { this.tableInfo.loading = state }
      )
      if (res?.data) {
        this.tableInfo.list = res.data;
      }
    },
    // 获取分类Id
    getCategoryUuid (val) {
      this.formData.categoryUuid = val;
    },
    // 选择商品
    handleSelectSku (row) {
      // 停用状态：1-启用，2-停用
      if (row.enableStatus == 2) {
        return this.$message.warning('停用商品不可进行关联，如需关联，需要先进行商品状态变更后重试。')
      }
      // 商品类型：0-正常，1-线索，6-潜在
      if (this.productType == 6 && row.enumTempProduct == 1) {
        return this.$message.warning('潜在需求不能关联线索商品，请重新选择。')
      }
      this.$emit('getGoodsInfo', row)
      this.handleCloseDialog()
    }
  }
};
</script>
